<template>
  <view class="page-container exam-container">
    <view class="exam-bg-box">
    </view>
    <view class="exam-header">
      <view class="back-btn">
        <image src="../../static/training/back.png" style="width: 20rpx;" mode="widthFix" @click="back"></image>
      </view>
      <view class="share-btn">
        <image src="../../static/training/share.png" style="width: 40rpx;" mode="widthFix"></image>
      </view>
    </view>

    <view class="exam-content">
      <view class="exam-content-title-card">
        <view class="card-tip-status"
          :class="detail.examStatus === '已结束'?'red-tip-status':detail.examStatus === '未开始'?'blue-tip-status':'green-tip-status'">
          {{detail.examStatus}}
        </view>
        <view class="card-title">
          {{detail.examName}}
        </view>
        <view class="card-tag-bar">
          <view class="card-tag green-color">
            <view class="card-tag-lable">
              考试时间
            </view>
            <view class="card-tag-content">
              {{timeFormat(detail.beginTime)}}~{{timeFormat(detail.endTime)}}
            </view>
          </view>
        </view>
      </view>
      <view class="exam-content-prepare-card">
        <view class="prepare-card-title">考前准备</view>
        <view class="prepare-card-info">
          <view class="prepare-card-info-item">
            <view class="checked-icon">
              <u-icon name="../../static/training/duihao.png" size="26rpx"></u-icon>
            </view>
            <view class="info-item-text">需要先进行培训</view>
          </view>
          <view class="prepare-card-info-item" v-if="detail.isSnap == 1">
            <view class="checked-icon">
              <u-icon name="../../static/training/duihao.png" size="26rpx"></u-icon>
            </view>
            <view class="info-item-text">本人人脸识别（抓拍次数 {{detail.snapNum}}）</view>
            <!-- （抓拍间隔 60’59’’） -->
          </view>
          <view class="prepare-card-info-item">
            <view class="checked-icon">
              <u-icon name="../../static/training/duihao.png" size="26rpx"></u-icon>
            </view>
            <view class="info-item-text" @click="onSettingPhotoAuth">
              <text>需要打开手机本地相册权限</text>
              <text style="color:#1A63FF;margin-left: 10rpx;">设置权限</text>
            </view>
          </view>
        </view>
      </view>
      <view class="exam-content-extra-card">
        <view class="exam-score bg-gray">
          <view>本次考试得分</view>
          <view class="red-color">{{userscore.examScore || 0}}分</view>
        </view>
        <view class="exam-rules" v-if="detail.reExam === 1 || detail.makeUpexam === 1">
          <view class="bg-gray" v-if="detail.reExam === 1">允许重考</view>
          <view class="bg-gray" v-if="detail.makeUpexam === 1">允许补考</view>
        </view>
        <view class="exam-jz bg-gray">
          <view class="exam-jz-title">考核分机制</view>
          <view class="exam-js-list">
            <view class="exam-jz-item">
              <u-icon label="参与培训" labelPos="right" labelSize="22rpx" labelColor="#969696" space="10rpx" size="24rpx"
                name="../../static/training/jiahao.png"></u-icon>
              <view>3分</view>
            </view>
            <view class="exam-jz-item">
              <u-icon label="参与培训" labelPos="right" labelSize="22rpx" labelColor="#969696" space="10rpx" size="24rpx"
                name="../../static/training/jianhao.png"></u-icon>
              <view>3分</view>
            </view>
          </view>
        </view>
      </view>
      <view class="block-btn" @click="onStartTest" v-if="detail.examStatus === '进行中'">去考试</view>
    </view>
    <view class="action-bar">
      <view>
        <view>
          <u-icon label="去完成培训" labelPos="bottom" labelSize="22rpx" labelColor="#969696" space="16rpx" size="40rpx"
            name="../../static/training/peixun.png"></u-icon>
        </view>
      </view>
      <view>
        <u-icon label="去完成问卷" labelPos="bottom" labelSize="22rpx" labelColor="#969696" space="16rpx" size="40rpx"
          name="../../static/training/wenjuan.png"></u-icon>
      </view>
      <view @click="onJumpRecord">
        <u-icon label="本次考试记录" labelPos="bottom" labelSize="22rpx" labelColor="#969696" space="16rpx" size="40rpx"
          name="../../static/training/jilu.png"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
  import permision from "@/js_sdk/wa-permission/permission.js"
  import dayjs from "dayjs";
  import {
    getExamDetail
  }
  from "@/common/api/exam/exam.js";
  export default {
    data() {
      return {
        detail: {
          examName: '',
          beginTime: '',
          endTime: '',
        },
        userscore: {},
      };
    },
    onLoad(option) {
      this.getExamDetailData(option.id)
    },
    methods: {
      getExamDetailData(id) {
        getExamDetail({
          id
        }).then(res => {
          this.detail = res.data.exam;
          this.userscore = res.data.userscore;
        })
      },
      back() {
        uni.switchTab({
          url: "/pages/index/index"
        })
      },
      onStartTest() {
        uni.navigateTo({
          url: `/pages/exam/test?id=${this.detail.id}`
        })
      },
      onJumpRecord() {
        uni.navigateTo({
          url: "/pages/exam/record"
        })
      },
      timeFormat(str) {
        return dayjs(str).format('YYYY/MM/DD HH:mm')
      },
      async requestAndroidPermission(permisionID, permisionName) {
        const result = await permision.requestAndroidPermission(permisionID)
        var strStatus
        if (result == 1) {
          strStatus = "已获得授权"
        }
        else if (result == 0) {
          strStatus = "未获得授权"
        }
        else {
          strStatus = "被永久拒绝权限"
        }
        uni.showModal({
          content: permisionName + strStatus,
          showCancel: false
        });
      },
      requestIosPermission(permisionID) {
        const result = permision.judgeIosPermission(permisionID)
        var strStatus
        if (result) {
          strStatus = "已获得授权"
        }
        else {
          strStatus = "未获得授权"
        }
        uni.showModal({
          content: permisionID + strStatus,
          showCancel: false
        });
      },
      onSettingPhotoAuth() {
        // #ifdef APP
        if (uni.getSystemInfoSync().platform == 'ios') {
          this.requestIosPermission('camera');
          this.requestIosPermission('photoLibrary');
        }
        else {
          this.requestAndroidPermission('android.permission.CAMERA', '相机');
          this.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE', '读取相册');
          this.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE', '写入相册');
        }
        // #endif
      }
    },
  };
</script>

<style lang="scss" scoped>
  .page-container {
    background-color: #F2F3F6;
    min-height: 100%;
  }

  .exam-container {
    position: relative;
  }

  .exam-bg-box {
    width: 100%;
    height: 550rpx;
    background-image: url("../../static/training/bg-img.png");
    background-size: 100% 100%;
  }

  .exam-header {
    position: absolute;
    width: 100%;
    top: 50rpx;
    padding: 0 50rpx;
    display: flex;
    justify-content: space-between;
  }

  .exam-content {
    padding: 0 4%;
    margin-top: -100rpx;
    padding-bottom: 200rpx;
  }

  .exam-content-title-card {
    position: relative;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 45rpx 40rpx 30rpx;

    .card-tip-status {
      position: absolute;
      top: 0;
      right: 0;
      color: #07A773;
      font-size: 24rpx;
      padding: 5rpx 20rpx;
      background: rgba(7, 167, 155, 0.1);
      border-top-right-radius: 20rpx;
      border-bottom-left-radius: 20rpx;

      &.red-tip-status {
        background-color: rgba(255, 54, 73, .1);
        color: #FF3649;
      }

      &.green-tip-status {
        background-color: rgba(7, 167, 115, .1);
        color: #07A773;
      }

      &.blue-tip-status {
        background-color: rgba(26, 99, 255, .1);
        color: #1A63FF;
      }
    }

    .card-title {
      font-size: 38rpx;
      font-weight: bold;
    }

    .card-tag-bar {
      margin-top: 10rpx;

      .card-tag {
        display: inline-block;
        overflow: hidden;
        font-size: 24rpx;
        line-height: 40rpx;

        .card-tag-lable {
          float: left;
          padding: 0 10rpx;
          color: #fff;
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
        }

        .card-tag-content {
          float: left;
          padding: 0 10rpx;
          border-left: none;
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
          font-size: 22rpx;
        }

        &.green-color {
          .card-tag-lable {
            background-color: #07A773;
            border: #07A773 2rpx solid;
          }

          .card-tag-content {
            border: #07A773 2rpx solid;
            color: #07A773;
          }
        }
      }
    }
  }

  .exam-content-prepare-card {
    background-color: #fff;
    margin-top: 25rpx;
    border-radius: 20rpx;
    padding: 20rpx 40rpx;
  }

  .prepare-card-title {
    font-size: 26rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .prepare-card-info-item {
    color: #646464;
    margin-bottom: 10rpx;

    .checked-icon {
      // width: 26rpx;
      // height: 26rpx;
      // border-radius: 50%;
      // background: rgba(26, 99, 255, 0.1);
      margin-right: 10px;
      // text-align: center;
      // padding-top: 3rpx;
      // padding-left: 3rpx;
    }

    >view {
      display: inline-block;
      vertical-align: middle;
    }

    .info-item-text {
      word-break: nowrap;
      font-size: 24rpx;
    }
  }

  .exam-content-extra-card {
    background-color: #fff;
    margin-top: 25rpx;
    border-radius: 20rpx;
    padding: 30rpx 30rpx;

    .exam-score {
      padding: 40rpx 30rpx;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
    }
  }

  .exam-rules {
    display: flex;
    gap: 15rpx;
    margin-top: 20rpx;

    >view {
      flex: 1;
      padding: 30rpx;
      border-radius: 20rpx;
    }
  }

  .exam-jz {
    margin-top: 20rpx;
    padding: 30rpx;
    border-radius: 20rpx;
  }

  .exam-jz-title {
    color: #323232;
    font-size: 28rpx;
    font-weight: bold;
  }

  .exam-js-list {
    margin-top: 20rpx;
  }

  .exam-jz-item {
    font-size: 22rpx;
    display: flex;
    color: #969696;
    justify-content: space-between;
    padding: 10rpx 0;
  }

  .bg-gray {
    background: #F5F7FA;
  }

  .red-color {
    color: #F83333;
  }

  .block-btn {
    margin-top: 40rpx;
    background: linear-gradient(115deg, #438BFE 0%, #1A63FF 100%);
    border-radius: 45px;
    text-align: center;
    font-size: 40rpx;
    color: #fff;
    padding: 25rpx 0;
  }

  .action-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    text-align: center;
    padding: 30rpx;
    background-color: #fff;
    color: #969696;

    >view {
      flex: 1;
    }
  }
</style>